<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="100px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-form-item label="关联菜单:">
        <el-input
          v-model="state.formData.menuFullName"
          disabled
          :maxlength="32"
          show-word-limit
          type="text"
        >
          <template #append>
            <el-button icon="Search" @click="handleOpenMenuSelect" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="资源名称:" prop="resourceName">
        <el-input
          v-model="state.formData.resourceName"
          :maxlength="32"
          show-word-limit
          type="text"
        />
      </el-form-item>
      <el-form-item label="资源地址:" prop="resourceUrl">
        <el-input
          v-model="state.formData.resourceUrl"
          :maxlength="256"
          prop="menuId"
          :rows="3"
          show-word-limit
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="备注:" prop="resourceRemark">
        <el-input
          v-model="state.formData.resourceRemark"
          :maxlength="128"
          :rows="3"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button
        :disabled="state.readonly"
        icon="circle-check"
        type="primary"
        @click="save"
      >
        确定
      </el-button>
    </template>
    <MenuSelector
      ref="menuSelectorRef"
      :disabled-keys="state.disabledKeys"
      width="20%"
      @change="handleMenuChange"
    />
  </el-dialog>
</template>

<script setup name="ResourceEdit">
import { useMessage } from "@/hooks/message";
import MenuSelector from "@/components/menuTreePicker.vue";
import { addObj, updateObj } from "@/api/admin/system/resource/";

const props = defineProps({
  title: {
    type: String,
    default: "资源"
  },
  width: {
    type: String,
    default: "20%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const menuSelectorRef = ref(null);

const state = reactive({
  readonly: false,
  operationAdd: false,
  dialogVisible: false,
  dialogTitle: props.title,
  disabledKeys: [],
  formData: {
    id: "",
    resourceUrl: "",
    resourceName: "",
    resourceRemark: "",
    menuId: "",
    menuFullName: ""
  },

  formRules: {
    resourceUrl: [
      { required: true, message: "资源地址不能为空", trigger: "blur" }
    ],
    resourceName: [
      { required: true, message: "资源名称不能为空", trigger: "blur" }
    ]
  }
});

const show = (row, readonly) => {
  if (readonly) {
    state.readonly = readonly;
    state.dialogTitle = `${props.title}详情`;
  } else {
    state.readonly = false;
  }
  if (row) {
    Object.assign(state.formData, row);
    if (row.id) {
      state.dialogTitle = `修改${props.title}`;
    } else {
      state.operationAdd = true;
      state.dialogTitle = `新增${props.title}`;
    }
  }
  state.dialogVisible = true;
};

const close = () => {
  formRef.value.resetFields();
  state.readonly = false;
  state.operationAdd = false;
  state.dialogTitle = props.title;
  state.formData = {
    id: "",
    resourceUrl: "",
    resourceName: "",
    resourceRemark: "",
    menuId: ""
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data;
      if (state.operationAdd) {
        data = await addObj(state.formData);
      } else {
        data = await updateObj(state.formData);
      }
      if (data && data.code && data.code === 200) {
        useMessage().success(data.msg);
        emits("confirm", {});
        close();
      } else {
        useMessage().error(data.msg);
      }
    }
  });
};

const handleOpenMenuSelect = () => {
  menuSelectorRef.value.show();
};

const handleMenuChange = async nodes => {
  if (nodes && nodes.length > 0) {
    state.formData.menuId = nodes[0].id;
    state.formData.menuFullName = nodes[0].menuFullName;
  }
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.el-input__inner {
  width: 140px;
}
</style>
